<template>
  <div>
    <div class="main">
      <div class="container">
        <div class="banner" style="position: relative;">
          <div class="aside">
            <ul>
              <li v-for="(item, key) in asides"
                  :key="'aside' + key"
                  @mouseover="showList(key)"
                  @mouseout="hideList(key)">
                {{item}}
                <span class="el-icon-arrow-right"></span>
              </li>
            </ul>
            <div
              @mouseover="showList(null)"
              @mouseout="hideList(null)" class="list" :style="{display: listShow}">
              <h2>国产钢材</h2>
              <div class="cl"></div>
              <div class="list-item" v-for="item in 9" :key="item">
                <img src="@/assets/images/products.png" alt="">
                <div class="list-item-p">
                  <h3>S50C标准磨光扁</h3>
                  <p>S50C标准磨光扁</p>
                  <p class="list-item-price">￥368</p>
                </div>
              </div>
            </div>
          </div>
          <div class="banner-img">
            <el-carousel interval="5000" height="462px">
              <el-carousel-item v-for="item in banners" :key="item">
                <div class="small">
                  <img :src="item" alt="">
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="main-products" v-for="(item, key) in 3" :key="'pro' + key">
          <div class="cl"></div>
          <div class="left">
            <div class="left-item">
              <div class="title">
                <h2>国产钢材</h2>
              </div>
              <div class="left-item-content">
                <div class="product-name">
                  国产特钢
                </div>
                <div class="product-name">
                  超越世界的精品
                </div>
                <p>天工/精工/宝钢</p>
                <div class="product-price"><span>49元</span> 起</div>
                <img src="@/assets/images/products-left.png" alt="">
              </div>
            </div>
          </div>
          <div class="right">
            <ul>
              <li>精工</li>
              <li>大冶</li>
              <li>中楚</li>
              <li>宝钢</li>
              <li>特钢</li>
              <li>太钢</li>
              <li>天工</li>
              <li>查看全部></li>
            </ul>
            <div class="cl"></div>
            <div class="product-list">
              <div class="product-item" v-for="(item, index) in 8" :key="'p' + index">
                <img src="@/assets/images/products.png" alt="">
                <h2>YXM27C</h2>
                <div class="products-list-price">￥466</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      asides: ['国产钢材', '进口钢材', '塑料模具钢', '冷作模具钢', '热作模具钢', '高速工具钢'],
      listShow: 'none',
      banners: [require('@/assets/images/banner1.jpg'), require('@/assets/images/banner2.jpg'), require('@/assets/images/banner3.jpg')]
    }
  },
  methods: {
    showList (type) {
      this.listShow = 'block'
    },
    hideList () {
      this.listShow = 'none'
    }
  }
}
</script>

<style lang="scss">
  .el-carousel__item .small  {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    margin: 0;

    &:nth-child(2n) {
       background-color: #99a9bf;
     }

    &:nth-child(2n+1) {
       background-color: #99a9bf;
    }
  }
</style>

<style lang="scss" scoped>
  .aside {
    background: $qBgColor;
    width: 225px;
    float: left;

    .list {
      position: absolute;
      height: 440px;
      left: 225px;
      top: 0;
      padding: 10px;
      z-index: 9;
      background: #f6f6f6;
      width: calc(100% - 205px);
      border: 1px solid $tBgcolor;

      h2 {
        margin-bottom: 10px;
      }

      .list-item {
        float: left;
        margin: 10px 19px 10px 0;
        background: #fff;
        border: 1px solid #ddd;

        img {
          float: left;
          width: 100px;
          height: 100px;
        }

        &-p {
          float: left;
          margin-left: 10px;
          width: 200px;
          position: relative;
          height: 100px;

          p {
            color: $qBgColor;
            &:nth-child(2) {
              margin: 5px 0;
            }
          }

          .list-item-price {
            color: $redColor;
            position: absolute;
            bottom: 0px;
            font-size: 1.4em;
          }
        }
      }
    }

    li {
      color: #fff;
      padding: 30px 10px 30px 20px;

      &:hover {
        background: $redColor;
      }

      span {
        float: right;
      }
    }
  }

  .left {
    width: 225px;
    float: left;

    .title {
      line-height: 70px;
    }

    .left-item-content {
      background: $tBgcolor;
      padding-top: 20px;
      margin-bottom: 20px;

      .product-name {
        font-size: 2em;
        line-height: 1.2em;
        padding-left: 10px;
      }

      img {
        width: 100%;
      }

      p {
        color: $qBgColor;
        padding-left: 10px;
        margin-top: 20px;
      }

      .product-price {
        margin: 10px 0;

        span {
          font-size: 1.4em;
          color: $redColor;
          padding-left: 10px;
        }
      }
    }
  }

  .right {
    width: calc(100% - 250px);
    float: left;
    margin-left: 15px;

    ul {
      float: right;
      padding: 33px 0 20px 0;

      li {
        float: left;
        list-style: none;
        margin: 0 10px;
      }
    }

    .product-item {
      background: #fff;
      width: calc(25% - 42px);
      margin: 20px;
      text-align: center;
      border: 1px solid #fff;
      float: left;

      &:hover {
        border: 1px solid $redColor;
      }

      img {
        width: 100%;
        margin-bottom: 10px;
      }

      .products-list-price {
        color: $redColor;
        font-size: 1.4em;
        line-height: 2em;
      }
    }
  }
</style>
